<template>
	<view class="content">
		<view class="safeContent">
			<view class="topCom">
				<!-- 返回组件 -->
				<van-nav-bar class="nav" left-arrow @click-left="onClickLeft">
					<template #title>
						<p class="title">星级会员</p>
					</template>
				</van-nav-bar>
			</view>
			<!-- 等级展示 -->
			<view class="grade" @click="upGrade"></view>
			<!-- 会员卡片 -->
			<view class="vipCard" @click="upVipImg">
				<!-- 未达成 -->
				<notReach></notReach>
				<!-- 今日奖池 -->
				<view class="day">
					今日奖池<text>29,485</text>KOI
				</view>
				<view class="pension">
					<view>
						永久可领取
					</view>
					昨天全网KOI产出数量0.6%加权奖励
				</view>
				<button @click="getKOI">领取</button>
				<view class="text">
					每日00:00刷新领取次数
				</view>
			</view>
			<!-- 领取记录 -->
			<view>
				<claim></claim>
			</view>

		</view>

	</view>
</template>

<script lang="ts" setup>
	import notReach from '@/components/Home/notReach/index.vue'
	import claim from '@/components/Home/claim/index.vue'
	// 点击回到发现页面
	const onClickLeft = () => history.back();

	// 跳转会员卡片
	const upVipImg = () : void => {
		uni.navigateTo({
			url: '/homeSub/vipImg/index'
		})
	}

	// 跳转升级记录
	const upGrade = () : void => {
		uni.navigateTo({
			url: '/homeSub/upGrade/index'
		})
	}

	const getKOI = () : void => {
		alert('领取成功')
	}
</script>

<style lang="scss">
	.content {
		min-height: 100vh;
	}

	@import '../../common.scss';

	.nav {
		--van-nav-bar-height: 88px;
		background-color: transparent;
		--van-nav-bar-icon-color: #ffffff;
		--van-nav-bar-text-color: #ffffff;
		--van-nav-bar-title-text-color: #ffffff;
		--van-nav-bar-arrow-size: 36px;
		--van-nav-bar-title-font-size: 36px;


		.title {
			height: 88px;
			font-size: 36px;
			font-weight: 500;
		}
	}

	::v-deep.van-nav-bar__title.van-ellipsis {
		line-height: 88px;
	}

	::v-deep.van-hairline--bottom:after {
		border-bottom-width: 0px !important;
	}

	.content {
		background: url(../../static/images/Home/vipCard/top_bg.png) no-repeat;
		background-size: 100%;

		.safeContent {
			width: calc(100% - 62px);
			margin: 0 auto;
			padding-top: 28px;

			.grade {
				height: 45px;
				margin-top: 40px;
				background: url(../../static/images/Home/vipCard/grade.png) no-repeat;
				background-size: 100%;
			}

			// 会员卡片
			.vipCard {
				height: 350px;
				padding-top: 180px;
				background: url(../../static/images/Home/vipCard/card_three_bg.png) no-repeat;
				background-size: 100%;
				margin-top: 50px;
				position: relative;

				.day {
					color: #CBDDFF;
					font-size: 22px;
					text-align: center;

					text {
						font-size: 60px;
					}
				}

				.pension {
					color: #191919;
					font-size: 24px;
					background: linear-gradient(151deg, #D8E4FF 0%, #338FFF 100%);
					width: 580px;
					overflow: hidden;
					border-radius: 50px;
					line-height: 40px;
					margin: 24px auto;

					view {
						font-size: 24px;
						color: #cbddff;
						background: linear-gradient(90deg, #9E9E9E 0%, #000000 100%);
						width: 146px;
						border-radius: 50px;
						text-align: center;
						float: left;
						margin-right: 10px;
					}
				}

				button {
					border-radius: 8px;
					background: linear-gradient(151deg, #D8E4FF 0%, #338FFF 100%);
					width: 220px;
					line-height: 72px;
					box-shadow: 0px 4px 4px 0px #121317;
					font-size: 28px;
					margin-top: 60px;
				}

				.text {
					font-size: 24px;
					color: #cbddff;
					text-align: center;
					line-height: 56px;

				}
			}

			// 领取记录
		}
	}
</style>